<template>
  <div class="container">
   <el-input
     type="textarea"
     autosize
    placeholder="请输入内容"
    v-model="aboutUsParams.title_contains"
    class="select"
    @blur="isShow=false"
  >
    </el-input>
    <i class="el-icon-search" @click="searchFn"></i>
    <div v-if="isShow" class="content">
      <h1>搜索结果</h1>
      <ul>
        <li v-for="item in searchList" :key="item.id"  v-html="
            item.title.replace(
              aboutUsParams.title_contains,
              `<span style='color:red'>${aboutUsParams.title_contains}</span>`
            )
          "
          @click="toDetail(item.id)"
          ></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {homelist} from "@/api/home"
export default {
name:'myHome',
data(){
  return {
    aboutUsParams: {
        title_contains:''
      },
    searchList:[],
    isShow:false
  }
},
created(){
this.homelist()
},
methods:{
  // 获取房产信息请求
    async homelist() {
      const res = await homelist(this.aboutUsParams);
      console.log(51,res);
      this.searchList = res.data;
      console.log(38,this.searchList);
    },
    //搜索事件
    searchFn(){
      this.isShow=true
      this.homelist()
    },
    //文章详情
    toDetail(id){
       console.log(id);
       this.$router.push({
        path: "/info",
        query: {
          id,
        },
      });
    }
}
}
</script>

<style lang='scss'>
li {
  list-style: none;
}
.container{
  position: relative;
  background-image: url('~@/assets/common/房产背景.jpeg');
  background-position: center;
  background-size: cover;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  padding: 0px;

  .select {
    position: absolute;
    top: 50%;
    right: 35%;
    width: 500px;
    opacity:1
  }
  .el-icon-search{
    position: absolute;
    top: 50%;
    right: 35%;
    height: 33px;
    width: 33px;
    line-height: 33px;
    text-align: center;
    background-color: #5391bf;
    border-radius: 20px 0 0 20px;
  }
}

.content {
  width: 500px;
  background-color:rgba(255, 255, 255, 0.5);
  position: absolute;
  right: 35%;
  top: 50%;
  margin-top: 40px;
  padding: 0 5px;
  h1 {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
  }
  ul {
    li {
      font-size: 14px;
      padding: 5px 0;
    }
  }
}
</style>